<template>
	<view class="selectedDetail">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="23"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">
					匠想公告
				</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right">
					<!-- <u-icon name="more-dot-fill" color="#fff" size="24"></u-icon> -->
				</view>
			</view>
		</u-navbar>
		
		<!-- <u-parse class="details" :selectable="true" :lazyLoad="true" :content="details.content"></u-parse> -->
		<view class="main">
			<view class="title">{{details.title}}</view>
			
			<view class="timer">
				<view>{{setDate(details.created)}}</view>
				<text>{{details.source}}</text>
			</view>
			<view class="details" v-html="details.content">
		</view>
			
		</view>
		
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {getArticleDetails} from '@/api/home.js'
	export default {
		data() {
			return {
				details:{
					content:"",
					title:"",
				},
			}
		},
		onLoad(opt) {
			this.getDetails(opt.id);
		},
		methods:{
			setDate(n){//设置时间
				let timer="";
				let date = new Date(n);
				let y = date.getFullYear();
				let m = date.getMonth()+1;
				let d = date.getDate();
				let h = date.getHours();
				let mm = date.getMinutes();
				timer = add0(y)+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm);
				function add0(m){
					return m<10?'0'+m:m 
				}
				return timer;
			},
			getDetails(id){
				this.$nextTick(()=>{
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				getArticleDetails({id}).then(res => {
					if(res.data.success){
						let content = res.data.obj.content,data = res.data.obj;
						// content = content.replace(/&lt;/g, '<');
						// content = content.replace(/&gt;/g, '/>');
						// content = content.replace(/&quot;/g, '');
						// this.details.content = content;
						this.details = data;
					}
				}).catch(err=>{
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			back() {
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			},
		}
	}
</script>

<style scoped lang="less">
	page{width: 100%;min-height: 100%;background-color: #fff;}
	.selectedDetail{
		width: 100%;
		min-height: 100%;
		padding-top: 160upx;
		padding-bottom: 40upx;
		.main{
			padding: 0 30upx;
			.title{
				font-size: 36upx;
				color: #333;
				font-weight: 800;
				text-align: justify;
			}
			.timer{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 24upx;
				margin-top: 34upx;
				margin-bottom: 20upx;
				text{
					color: #2C1769;
				}
				view{
					margin-right: 30upx;
					color: #7A7A7D;
				}
			}
			.details{
				width: 100%;
				min-height: 100%;
				color: #141414;
				font-size: 30upx;
				line-height: 58upx;
				text-align: justify;
				image,img{
					width: 100%;
				}
			}
		}
		
		.icon-right{
			-webkit-transform: rotate(90deg);
			transform: rotate(90deg);
		}
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				text-align: center;
				background-color: #fff;
				box-shadow: 0px 0px 1px 0px rgba(51,51,51,0.5000);
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>